/**
 * Created by Eenie on 2016/12/4.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableHighlight,
    StyleSheet,
    ToastAndroid,
    TouchableOpacity,
    TextInput,
    Image
} from 'react-native';

export default class Login extends Component {


    render() {
        return (<View style={{flex:1,alignItems:'center',backgroundColor:'#f0f0f0'}}>
            <View style={{flexDirection:'row'}}>
                <View style={styles.topBar}>
                    <Text style={{fontSize:16}}>登录</Text>

                </View>
            </View>

            <Image style={{width:100,
            height:100,
            borderRadius:100,
            margin:50,
            borderWidth:2,
            borderColor:'skyblue'}} source={require("../images/ic_welcome.jpg")}/>
            <View style={{flexDirection:'row'}}>
                <TextInput style={styles.input} placeholder={"账号"} underlineColorAndroid={'#00000000'} />
            </View>
            <View style={{flexDirection:'row'}}>
                <TextInput style={styles.input} placeholder={"密码"}/>

            </View>
            <TouchableOpacity style={{flexDirection:'row'}}>
                <View style={styles.button}>
                    <Text style={{color:'#fff'}}>LOGIN</Text>
                </View>

            </TouchableOpacity>


        </View>);


    }
};

var styles = StyleSheet.create({
    main: {
        flex: 1,
        backgroundColor: '#e3e3e3',
    },
    input: {
        flex: 1,
        backgroundColor: '#ffffff',
        borderRadius: 2,
        margin: 10,
        height: 40
    },
    button: {
        flex: 1,
        backgroundColor: '#06872C',
        borderRadius: 2,
        margin: 10,
        height: 40,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },

    backTop: {
        flex: 1,
        backgroundColor: 'skyblue'
    },
    backBottom: {
        flex: 3,
        backgroundColor: '#f5f5f5'
    },
    topBar: {
        flex: 1,
        backgroundColor: '#ffffff',
        height: 50,
        alignItems:'center',
        justifyContent:'center'
    }

});